<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column', padding: '8px' }">
      <a-input-search v-model:value="searchKey" placeholder="套餐名称/助记码" @search="onSearch" />
      <SuitList ref="suitListRef" :search-key="searchKey" select-default :template-type="3" @select="onSelect" />
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <SuitHeader />
      <div class="flex flex-1 mt-2 overflow-hidden">
        <a-card class="flex-1 overflow-auto" :body-style="{ height: '100%', overflow: 'hidden' }">
          <VisitEdit :tcid="suitStore.currentSuit.tcid" />
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SuitHeader from './components/Header'
import SuitList from './components/List'
import VisitEdit from './components/Edit.vue'
import useSuitStore from './store'

const suitStore = useSuitStore()
const searchKey = ref()
const suitListRef = ref()
const rowItems = ref({})
const onSearch = () => {
  suitListRef.value.getData()
}
const onSelect = (params = {}) => {
  rowItems.value = params
}
onMounted(() => {
  suitStore.currentSuit = {}
})
</script>
<style lang="less" scoped>
:deep(.ant-radio-button-wrapper) {
  padding: 0 25px;
}
</style>
